<div class="row">
    <div class="col-12">
        <div class="card mb-4">
            <div class="card-body">
                <filter-list request="request" callback="getList(pageIndex)" create-url="'/portal/post/create-gallery'"
                    create-text="'Create Post'">
                </filter-list>

                <select class="form-select form-select-sm col-2" ng-model="selectedList.action">
                    <option ng-repeat="item in actions" ng-value="item">{{item}}</option>
                </select>
                <button type="button" class="btn btn-sm btn-primary"
                    ng-if="selectedList.data.length > 0 && selectedList.action" ng-click="applyList()">
                    Apply
                </button>
                <hr />
                <table class="table table-sm table-hover mb-0" cellspacing="0">
                    <thead class="thead-light">
                        <tr>
                            <!-- <th ng-if="!canDrag" scope="col" width="15px">
                            </th> -->
                            <!-- <th ng-if="!canDrag" scope="col" width="15px">
                            </th> -->
                            <th scope="col" width="15px">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" ng-model="selectedList.isSelectAll"
                                        ng-change="selectAll(selectedList.isSelectAll)" id="customCheck_all" />
                                    <label class="custom-control-label" for="customCheck_all"></label>
                                </div>
                            </th>
                            <th scope="col">Post</th>
                            <th scope="col" width="15%">Image</th>
                            <th scope="col" width="15%">Created Date</th>
                            <th scope="col" width="15%">Author</th>

                            <th scope="col" style="width: 5%"></th>
                        </tr>
                    </thead>

                    <tbody class="sortable" ng-init="getList()">
                        <tr ng-repeat="item in data.items track by $index" class="sortable-item" sort-model="post"
                            sort-model-id="{{item.id}}">
                            <!-- <td ng-if="!canDrag" style="cursor:grab;" class="drag-header align-middle small">
                                <small class="fa fa-grip-vertical fa-xs text-black-50"></small>
                            </td> -->
                            <!-- <td ng-if="!canDrag" class="align-middle">
                                <div class="btn-group-vertical" role="group" aria-label="Basic example">
                                    <button ng-click="goUp(item.childs, $index)" type="button" title="Move up"
                                        class="btn  btn-xs py-0 border-bottom"><span
                                            class="fa fa-sort-up small"></span></button>
                                    <button ng-click="goDown(item.childs, $index)" type="button" title="Move down"
                                        class="btn  btn-xs py-0"><span class="fa fa-sort-down small"></span></button>
                                </div>
                            </td> -->
                            <td>
                                <input type="checkbox" ng-model="item.isSelected"
                                    ng-change="select(item.id, item.isSelected)" />
                            </td>
                            <td>
                                <small>{{item.title}}</small>
                            </td>
                            <td>
                                <preview-image img-height="25" img-src="item.imageUrl"></preview-image>
                            </td>
                            <td class="text-black-50">
                                <small>
                                    {{item.createdDateTime | utcToLocal:'dd.MM.yy hh:mm a'}}
                                </small>
                            </td>
                            <td class="text-black-50">
                                <small>{{item.createdBy}}</small>
                            </td>

                            <td>
                                <div class="btn-group btn-group-sm btn-group-sm float-end" role="group"
                                    aria-label="Actions">
                                    <a href="/portal/post/gallery-details/{{item.id}}"
                                        class="btn btn-link text-primary">
                                        <span class="fas fa-pen"></span>
                                    </a>
                                    <a ng-click="preview(item)" target="_blank" class="btn btn-link text-primary">
                                        <span class="fas fa-eye"></span>
                                    </a>
                                    <a ng-click="remove(item.id);" class="btn btn-link text-danger">
                                        <i class="fas fa-trash-alt"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="col-6"></div>
                    <div class="col-6">
                        <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems"
                            ul-class="pagination justify-content-end m-0" a-class="page-link"
                            paging-action="getList(page-1)" scroll-top="true">
                        </paging>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>